<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>选择器 - 属性</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: '微软雅黑';
            background-color: #F7F7F7;
        }

        .wrapper {
            width: 1024px;
            margin: 0 auto;
        }

        .wrapper>section {
            min-height: 300px;
            margin-bottom: 30px;
            box-shadow: 1px 1px 4px #DDD;
            background-color: #FFF;
        }

        .wrapper>header {
            text-align: center;
            line-height: 1;
            padding: 20px;
            margin-bottom: 10px;
            font-size: 30px;
        }

        .wrapper section>header {
            line-height: 1;
            padding: 10px;
            font-size: 22px;
            color: #333;
            background-color: #EEE;
        }

        .wrapper .wrap-box {
            padding: 20px;
        }

        form {
            width: 300px;
            height: 300px;
            margin: 0 auto;
        }

        form input[type="text"] {
            width: 200px;
            height: 30px;
        }

        form input[type="password"] {
            width: 200px;
            height: 30px;
        }

        .attr1 {}

        .download {}

        .attr1 a[href="./a.rmvb"] {
            color: red;
        }

        .attr1 a[href="./b.rmvb"] {
            color: pink;
        }

        /*  E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的*/
        .attr2 a[class~="download"] {
            color: red;
        }

        /*  E[attr|=val] 表示的要么一个单独的属性值 要么这个属性值是以"-"分隔的*/
        .attr3 a[class|="download"] {
            color: red;
        }

        /*  E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置 */
        .attr4 a[class*="download"] {
            color: red;
        }

        /*  E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置 */
        .attr5 a[class^="download"] {
            color: red;
        }

        /*  E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置 */
        .attr6 a[class$="download"] {
            color: red;
        }

        /*::before 和::after 是通过 css 模拟出的html标签的效果*/
        span::before{
            content:"smyhvae";
            color:red;
            background-color: pink;
            width: 50px;
            height: 50px;
            display: inline-block;
        }

        span::after{
            content:"永不止步";
            color:yellowgreen;
        }

        /*给原本的span标签设置一个默认的属性*/
        span{
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <header>CSS3-属性选择器</header>
        <section>
            <header>简介</header>
            <div class="wrap-box">
                <form action="">

                    <ul>
                        <li>
                            姓名: <input type="text">
                        </li>
                        <li>
                            密码: <input type="password">
                        </li>

                        <li>
                            性别: <input type="radio">男
                            <input type="radio"> 女
                        </li>
                        <li>
                            兴趣: <input type="checkbox" name="" id="">写代码
                        </li>
                        <li>
                            <input type="submit" value="提交">
                        </li>
                    </ul>
                </form>
            </div>
        </section>
        <section class="attr1">
            <header>E[attr]</header>
            <div class="wrap-box">
                <a href="./a.rmvb" class="download download-movie">下载</a>
                <a href="./b.rmvb" class="download download-movie">下载</a>
                <a href="./a.mp3" class="download download-music">下载</a>
            </div>
        </section>
        <section class="attr2">
            <header>E[attr~=attr]</header>
            <div class="wrap-box">
                <a href="./a.rmvb" class="download download-movie">下载</a>
                <a href="./b.rmvb" class="download download-movie">下载</a>
                <a href="./a.mp3" class="download download-music">下载</a>
            </div>
        </section>
        <section class="attr3">
            <header>E[attr|=attr]</header>
            <div class="wrap-box">
                <a href="./a.rmvb" class="download">下载</a>
                <a href="./b.rmvb" class="download-movie">下载</a>
                <a href="./a.mp3" class="download-music">下载</a>
            </div>
        </section>
        <section class="attr4">
            <header>E[attr*=val]</header>
            <div class="wrap-box">
                <a href="./a.rmvb" class="download">下载</a>
                <a href="./b.rmvb" class="moviedownload">下载</a>
                <a href="./a.mp3" class="downloadmusic">下载</a>
            </div>
        </section>
        <section class="attr5">
            <header>E[attr^=val]</header>
            <div class="wrap-box">
                <a href="./a.rmvb" class="download">下载</a>
                <a href="./b.rmvb" class="moviedownload">下载</a>
                <a href="./a.mp3" class="downloadmusic">下载</a>
            </div>
        </section>
        <section class="attr6">
            <header>E[attr$=val]</header>
            <div class="wrap-box">
                <a href="./a.rmvb" class="download">下载</a>
                <a href="./b.rmvb" class="moviedownload">下载</a>
                <a href="./a.mp3" class="downloadmusic">下载</a>
            </div>
        </section>
    </div>
    <span>生命壹号</span>
</body>

</html>